<template>
  <van-popup slot="fr-ext" v-model="popup" class="lc-fullscreen-popup">
    <div class="lc-fixed-top">
      <van-nav-bar
        :left-text="$t('close')"
        title="终止流程"
        left-arrow
        fixed
        @click-left="closePopup"
      />
      <van-cell-group>
        <van-field
          v-model="opinion"
          label="意见"
          type="textarea"
          placeholder="请输入意见"
          rows="4"
          autosize
        />
      </van-cell-group>
    </div>
    <lc-toolbar
      :actions="actions"/>
  </van-popup>

</template>

<script>
import { stopProcess } from '@/api/platform/bpmn/action'
import LcToolbar from '@/components/LcToolbar'
export default {
  components: {
    LcToolbar
  },
  props: {
    value: Boolean,
    taskId: String
  },
  data() {
    return {
      popup: false,
      opinion: '',
      actions: [{
        'name': this.$t('common.button.save'),
        'buttonType': 'primary',
        'callback': this.onSave
      }]
    }
  },
  watch: {
    value() {
      this.popup = this.value
    }
  },
  methods: {
    closePopup() {
      this.$emit('input', false)
    },
    onSave() {
      stopProcess({
        taskId: this.taskId,
        endReason: this.opinion
      }).then(response => {
        this.$toast.success(`终止流程成功！`)
        this.$router.push({ path: '/bpmn/pending' })
        this.$emit('after-script', 'endProcess')
      }).catch(error => {
        console.error(error.cause)
      })
    }
  }

}
</script>
